<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/dengluzhuce.css">
</head>

<body>
    <div class="header">
        <a href="shouye.html"><img src="https://www.o-j-o.cn/themes/ojo/images/logo.png" alt=""></a>
        <img src="img/denglu.png" alt="">
    </div>
    <div class="dengluzhuce">
        <div class="inp calendar">
            <div class="inp-c">
                <ul id="box">
                    <li class="active">登录</li>
                    <li>注册</li>
                </ul>

                <div class="text" id="txt">
                    <div class="cont1">
                        <form action="">
                            <input type="text" name="" id="" placeholder="用户名" class="username">
                            <input type="password" name="" id="" placeholder="密码" class="userpass">
                            <input type="button" value="登录" class="denglu">
                        </form>
                    </div>
                    <div class="cont2" style="display: none;">
                        <form action="">
                            <input type="text" placeholder="用户名" class="username1">
                            <input type="text" placeholder="密码" class="userpass1">
                            <input type="button" value="注册" class="zhuce">
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var ali = document.querySelector("#box").children;
    var acont = document.querySelector(".text").children;

    for (var i = 0; i < ali.length; i++) {
        ali[i].abc = i;
        ali[i].onclick = function() {

            for (var j = 0; j < ali.length; j++) {
                ali[j].className = "";
                acont[j].style.display = "none";
            }
            this.className = "active";
            var index = this.abc;
            acont[index].style.display = "";
        }
    }
</script>
<script src="js/jquery.min.js"></script>
<script>
    $(".zhuce").click(function() {
        $.ajax({
            url: "http://localhost:3000/api",
            data: {
                type: "register",
                user: $(".username1").val(),
                pass: $(".userpass1").val()
            },
            success: (res) => {
                // console.log(res);
                res = JSON.parse(res);
                if (res.state === 1) {
                    alert("注册成功");
                    $("#box").find("li").eq(0).trigger("click");

                } else {
                    alert("注册失败,用户名重复")
                }
            },
            type: "post"
        })
    })



    $(".denglu").click(function() {
        $.ajax({
            url: "http://localhost:3000/api",
            data: {
                type: "login",
                user: $(".username").val(),
                pass: $(".userpass").val()
            },
            success: (res) => {
                // console.log(res);
                res = JSON.parse(res);
                if (res.state === 1) {
                    alert("登录成功");
                    // location.href = "shouye.html";
                    // sessionStorage.setItem
                    // ("userMsg",JSON.stringify({
                    //     user:$(".username").val(),
                    //     pass:$(".userpass").val()
                    // }))
                    loginSuccess()

                } else if (res.state === 2) {
                    alert("密码不对");
                } else {
                    alert("用户名不存在");
                    $("#box").find("li").eq(1).trigger("click");
                }
            },
            type: "post"
        })
    })

    function loginSuccess() {
        location.href = "shouye.html";
        sessionStorage.setItem("userMsg", JSON.stringify({
            user: $(".username").val(),
            pass: $(".userpass").val()
        }))

    }


    let = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
    if (userMsg.user && userMsg.pass) {
        $(".header-right").children(".denglubtn").html(userMsg.user)
    }
</script>

</html>